最後一篇就沒有額外準備新的學習進度了,整理一下我個人的學習心得。
在開始鐵人賽之前,我看了「哈佛教你做出好圖表」這本書大約90%,惡補了一下關於資訊視覺化及圖表製作相關基礎知識,以及「用D3.js完成網頁視覺化」大約10%的進度,並在網路上隨性的爬文初步了解D3.js的基本語法和架構。 對於主題本身D3.js並沒有真正寫過任何程式碼,坦白說這樣的準備是稍嫌不足的;不過也算是可以提供給和我一樣的初學者參考,對於這樣子的新手在短時間的學習能夠學到什麼樣的程度、以及會遇到什麼問題。
30天過後,「用D3.js完成網頁視覺化」大約是翻到了50%的進度,大部份的基本功(非常基本的)算是run過一遍。整體來說是覺得D3.js並不算太難,但學起來和以往學習其他js函式庫相比(如jquery、vue等)會感覺比較不容易獲得成就感,不是能夠那麼快獲得回報以及成果,還需要大量的api學習和練習。以我來說如果現在要再做一個全新的圖表,會大約知道該如何下手,不過要獨自開發和還是需要不斷的查資料及反覆測試;而如果是要再挑戰更複雜的圖表,又要開始研究許多新的api和概念,只能說還有很長的一段路要走。
我自己後續學習的規劃大概會有幾個重點:
關於第一點,如同我在最前面的文章所說明的,考量學習資源取的方便性所以這30天是用v3.x來做練習的,而v4.x之後因版本不向下相容所以還需額外了解新的api語法。
我作了點功課大約了解到v3.x→v4.x→v5.x大致上的差異如下:
d3.scale.linear
→ d3.scaleLinear
d3.scale.category10
→ d3.schemeCategory10
d3.svg.line()
→ d3.line()
d3.layout.stack()
→ d3.stack()
等等
selection.transition()
.duration(750)
.ease(“elastic-out”, 1, 0.3)
在v4.x變成
selection.transition()
.duration(750)
.ease(d3.easeElasticOut
.amplitude(1)
.period(0.3))
版面配置(layout)的更新
v4.x增加es6 module
v4.x的刻度繪製更加容易,不一定要再需要自己定義css樣式
v4.x函式庫模組化,可以依自己需別個別引用所需的功能類別的檔案,不一定要使用完整版的d3.js library
v5.x版增加Promise非同步語法
v5.x版加強配色函式
學習資源目前累積的還不算太多,但大致上有幾個可以推薦的:
D3.js官網API文件。學程式當然還是得看文件,D3.js官網並沒有提供step by step的教學,所以還是得自己想辦法從彷彿百科全書的文件查閱(苦啊)。官網提供的非官方中文api文件是舊版,所以還是建議以英文版的為主。
https://github.com/d3/d3/blob/master/API.md
OXXOStudio寫的svg系列教學相當不錯,也有為數不少的d3.js教學
https://www.oxxostudio.tw/articles/201406/svg-01-intro.html
有許多用d3.js開發的圖表範例,線上就有原始碼可參考
https://plotdb.com/
很優質的資訊視覺化相關資訊的部落格,也累積了很多d3.js的文章;但近年已經很少更新、且d3.js的文章都是v3.x版的
http://blog.infographics.tw/
最後沒講個幾句好像很奇怪。
我畢業了~ 耶。